<template>
  <el-table
    :data="list"
    style="width: 100%; margin-bottom: 20px"
    row-key="cat_id"
    border
    :tree-props="{ children: 'children' }"
  >
    <el-table-column type="index" label="#" width="50"> </el-table-column>
    <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
    <el-table-column label="是否有效" width="180">
      <i class="el-icon-success"></i>
    </el-table-column>
    <el-table-column label="排序">
      <template #default="{ row }">
        <el-tag :type="levels[row.cat_level].type" size="mini">{{
          levels[row.cat_level].name
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template>
        <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      levels: [
        { name: '一级', type: '' },
        { name: '二级', type: 'success' },
        { name: '三级', type: 'warning' },
        { name: '四级', type: 'danger' },
        { name: '五级', type: 'info' }
      ],
      list: [
        {
          cat_id: 2015,
          cat_name: '我去饿饿',
          cat_pid: 0,
          cat_level: 0,
          cat_deleted: false,
          children: [
            {
              cat_id: 2679,
              cat_name: '1',
              cat_pid: 2015,
              cat_level: 1,
              cat_deleted: false,
              children: [
                {
                  cat_id: 2685,
                  cat_name: '111',
                  cat_pid: 2679,
                  cat_level: 2,
                  cat_deleted: false,
                  children: [
                    {
                      cat_id: 2689,
                      cat_name: '000',
                      cat_pid: 2685,
                      cat_level: 3,
                      cat_deleted: false
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          cat_id: 2028,
          cat_name: '天才少年刘元江',
          cat_pid: 0,
          cat_level: 0,
          cat_deleted: false,
          children: [
            {
              cat_id: 2042,
              cat_name: '教你如何变有钱',
              cat_pid: 2028,
              cat_level: 1,
              cat_deleted: false,
              children: [
                {
                  cat_id: 2660,
                  cat_name: '123',
                  cat_pid: 2042,
                  cat_level: 2,
                  cat_deleted: false
                }
              ]
            },
            {
              cat_id: 2662,
              cat_name: '凄凄切切',
              cat_pid: 2028,
              cat_level: 1,
              cat_deleted: false
            }
          ]
        },
        {
          cat_id: 2029,
          cat_name: '123',
          cat_pid: 0,
          cat_level: 0,
          cat_deleted: false,
          children: [
            {
              cat_id: 2680,
              cat_name: '666',
              cat_pid: 2029,
              cat_level: 2,
              cat_deleted: false
            },
            {
              cat_id: 2711,
              cat_name: '222',
              cat_pid: 2029,
              cat_level: 1,
              cat_deleted: false,
              children: [
                {
                  cat_id: 2712,
                  cat_name: '111',
                  cat_pid: 2711,
                  cat_level: 2,
                  cat_deleted: false
                }
              ]
            }
          ]
        },
        {
          cat_id: 2030,
          cat_name: '45654645645',
          cat_pid: 0,
          cat_level: 0,
          cat_deleted: false,
          children: [
            {
              cat_id: 2681,
              cat_name: '555',
              cat_pid: 2030,
              cat_level: 2,
              cat_deleted: false
            }
          ]
        },
        {
          cat_id: 2031,
          cat_name: '6666666545646456',
          cat_pid: 0,
          cat_level: 0,
          cat_deleted: false,
          children: [
            {
              cat_id: 2704,
              cat_name: '000',
              cat_pid: 2031,
              cat_level: 1,
              cat_deleted: false
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>
</style>
